<template>
  <!-- 根标签 -->
  <div>
    <!-- 布局 -->
    <el-container>
      <!-- 页面的head头部 -->
      <el-header id="SH-header">
        <span style="font-size: 25px; color: #000000;float:left;">众筹平台</span>
        <el-dropdown  style="float:right">
        	<el-avatar style="background-color: #5DAF34;" icon="el-icon-user-solid"></el-avatar>
        	<el-dropdown-menu style="width: 120px; text-align: center;">
        		<el-link @click="toIndex" target="_blank">众筹网首页</el-link>
        		<el-link @click="toMember" target="_blank">个人中心</el-link> <br>
        		<el-link @click="loginout" target="_blank">退出系统</el-link>
        		<!-- <el-button style="border-bottom: solid;" @click="toIndex">众筹网首页</el-button>
        		<br>
        		<el-button style="border-bottom: solid;" @click="loginout">退出系统</el-button> -->
        	</el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <!-- 页面的主体部分 -->
      <el-main>
        <div class="main-div" >
          <!-- main的头部信息 -->
          <!-- <el-tabs v-model="activeName" @tab-click="toChangeTab"> -->
		  <el-tabs v-model="activeName"> 
            <el-tab-pane label="众筹首页" name="first"></el-tab-pane>
            <el-tab-pane label="项目总览" name="second"></el-tab-pane>
            <el-tab-pane label="发起项目" name="third"></el-tab-pane>
            <el-tab-pane label="我的众筹" name="fourth"></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 步骤显示 -->
        <div id="main-step">
          <el-steps :active="active" align-center>
            <el-step title="1.项目及发起人信息"></el-step>
            <el-step title="2.回报设置"></el-step>
            <el-step title="3.确认信息"></el-step>
            <el-step title="4.完成"></el-step>
          </el-steps>
        </div>
        <router-view @forNum="getNum" ta="aaa"></router-view>
      </el-main>
      <!-- 页面的底部 -->
      <el-footer>
        <div id="foot-main">
          <div>
            <a rel="nofollow" href="#">关于我们</a> | <a rel="nofollow" href="#">服务条款</a> |
            <a rel="nofollow" href="#">免责声明</a> | <a rel="nofollow" href="#">网站地图</a> |
            <a rel="nofollow" href="#">联系我们</a>
          </div>
          <div>
            niuB_Plus.com  版权所有
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data(){
    return{
      active:1,
	  activeName:'third'
    }
  },
  methods:{
    getNum(va){
      this.active=va;
    },
	toIndex(){
		this.$router.push('/member')
	},
	toCFStart(){
		// 去添加收货地址，下面是添加收货地址url
		this.$router.push("/start")
	},
	toMember(){
		this.$router.push("/member")
	},
	/* toChangeTab(tab, event) {
		if(this.activeName != tab.name){
			this.activeName = tab.name;
			if(this.activeName==="first"){
				//应该是跳转到首页
				this.$router.push('/index')
			}
			if(this.activeName==="second"){
				//应该是跳转到项目总览页面
				this.$router.push('/member')
			}
			if(this.activeName==="third"){
				//应该是跳转到发起项目协议页面
				this.$router.push('/start')
			}
			if(this.activeName==="fourth"){
				//应该是跳转到个人中心页面
				this.$router.push('/member')
			}
		}else{
			this.activeName = tab.name;
			if(this.activeName==="first"){
				//应该是跳转到首页
				this.$router.push('/index')
			}
			if(this.activeName==="second"){
				//应该是跳转到项目总览页面
				this.$router.push('/member')
			}
			if(this.activeName==="fourth"){
				//应该是跳转到个人中心页面
				this.$router.push('/member')
			}
		}
	} */
  }
}
</script>

<style scoped>
#SH-header{
  height: 50px !important;
   background-color: #B3C0D1;
	    color: #333;
	    line-height: 60px;
}
.el-footer{
  height: 50px !important;
}
.head-div{
  height: 50px;
  width: 70%;
  margin: 0 auto;
}
.main-div{
  width: 70%;
  margin: 0 auto;
}
#head-title{
  height: 100%;
  font-size: 20px;
  margin: auto 50px;
  line-height: 50px;
}
#head-user{
  line-height: 50px;
}
#main-step{
  width: 70%;
  margin: 30px auto;
}
#foot-main{
  line-height: 25px;
  margin: 0 auto;
  text-align: center;
}

</style>